<template>
  <view class="settings">
    <!-- 检查更新 -->
    <view class="setting-item" @click="checkUpdate">
      <view class="item-left">
        <text class="item-icon">🔄</text>
        <text class="item-text">检查更新</text>
      </view>
    </view>

    <!-- 通知管理 -->
    <view class="setting-item">
      <view class="item-left">
        <text class="item-icon">🔔</text>
        <text class="item-text">通知管理</text>
      </view>
      <switch class="switch" color="#f55" @change="toggleNotification" :checked="notificationEnabled"></switch>
    </view>

    <!-- 关于我们 -->
    <view class="setting-item" @click="aboutUs">
      <view class="item-left">
        <text class="item-icon">ℹ️</text>
        <text class="item-text">关于我们</text>
      </view>
    </view>

    <!-- 注销账号 -->
    <view class="setting-item logout" @click="logout">
      <view class="item-left">
        <text class="item-icon">❌</text>
        <text class="item-text">注销账号</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      notificationEnabled: false, // 通知状态
    };
  },
  methods: {
    // 检查更新
    checkUpdate() {
      uni.showToast({
        title: '已是最新版本',
        icon: 'none',
      });
    },
    // 切换通知开关
    toggleNotification(e) {
      this.notificationEnabled = e.detail.value;
      uni.showToast({
        title: this.notificationEnabled ? '通知已开启' : '通知已关闭',
        icon: 'none',
      });
    },
    // 关于我们
    aboutUs() {
      uni.showModal({
        title: '关于我们',
        content: '开发者：冯钰恒、易率、梁俊猛；测试者：软工小组全体成员',
        showCancel: false,
      });
    },
    // 注销账号
    logout() {
      uni.showModal({
        title: '确认注销',
        content: '确定要注销当前账号吗？',
        success: (res) => {
          if (res.confirm) {
            uni.showToast({
              title: '账号已注销',
              icon: 'success',
            });
          }
        },
      });
    },
  },
};
</script>

<style scoped>
.settings {
  background-color: #f8f8f8;
  height: 100vh;
}
.setting-item {
  height: 60px; /* 设置高度 */
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #fff;
  padding: 15px 20px;
  border-bottom: 1px solid #ddd;
  border-top: 1px solid #ddd;
}
.item-left {
  display: flex;
  align-items: center;
}
.item-icon {
  font-size: 18px;
  margin-right: 25px;
}
.item-text {
  font-size: 16px;
  color: #333;
}
.logout {
  color: red;
}
.switch {
  transform: scale(0.8);
}
</style>